<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>HTML</title>

    <style>
        body{
            background-color:paleturquoise;
        }

        button{
            border:0;
            width: 200px;
            height: 35px;
            background-color: orangered;
            color: white;
            font-size: 16px;
            border-radius: 6px;
        }
    </style>
</head>

<body>
<h2>JS调用原生中的方法</h2>
<button id="btn">获取原生信息</button>
<div id="valueDiv"></div>
<!--        <button id="btn1">调用原生提示窗（退出登录）</button>-->
<p></p>

</body>
<script>
    // 这段代码是固定的，必须要放到js中最前面
    function setupWebViewJavascriptBridge(callback) {
         if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
         if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
         window.WVJBCallbacks = [callback];
         var WVJBIframe = document.createElement('iframe');
         WVJBIframe.style.display = 'none';
         WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
         document.documentElement.appendChild(WVJBIframe);
         setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
     }

     // 与原生交互的所有JS方法都要在这里注册,才能让原生和JS之间相互调用
    setupWebViewJavascriptBridge(function(bridge) {

        // 原生获取web信息
        bridge.registerHandler('getH5Info', function(data, responseCallback) {
            alert("原生中传递过来的参数:\n"+JSON.stringify(data));
            console.log("原生中传递过来的参数:"+JSON.stringify(data));
            // 把处理好的结果返回给原生
            let param = {"userID":"DX001", "userName":"111", "age":"18", "otherName":"1111"};
            var div = document.getElementById("valueDiv");
            div.textContent = "传给原生的值:\n"+JSON.stringify(param);
            responseCallback(param);
        });

        //js调用原生
        document.getElementById('btn').onclick = function () {
            bridge.callHandler('getAppInfo', {"userID":"DX001", "userName":"111", "age":"18", "otherName":"1111"}, function responseCallback(responseData) {
                console.log("原生中返回的结果:"+JSON.stringify(responseData));
                var div = document.getElementById("valueDiv");
                div.textContent = "原生中返回来的结果:\n"+JSON.stringify(responseData);
            });
        };

    })
</script>
</html>
